<template>
  <ckeditor
    :editor="editor"
    @ready="onReady"
    v-model="editorData"
    :config="editorConfig"
    @input="editorChange"
  ></ckeditor>
</template>

<script>
  import CKEditor from '@ckeditor/ckeditor5-vue2'
  import UploadAdapter from './config/UpLoad'
  import MyEditor from './config/MyEditor'
  export default {
    name: 'MyCkEditor',
    props: {
      value: {
        type: String,
        default: ''
      }
    },
    components: {
      ckeditor: CKEditor.component
    },
    watch: {
      value(newValue) {
        this.editorData = newValue
      }
    },
    data() {
      return {
        editor: MyEditor,
        editorData: '',
        editorConfig: {
          placeholder: '请输入内容'
        }
      }
    },
    methods: {
      onReady(editor) {
        editor.ui
          .getEditableElement()
          .parentElement.insertBefore(
            editor.ui.view.toolbar.element,
            editor.ui.getEditableElement()
          )
        editor.plugins.get('FileRepository').createUploadAdapter = loader =>
          new UploadAdapter(loader)
      },
      editorChange() {
        this.$emit('editorChange', this.editorData)
      }
    }
  }
</script>

<style lang="scss">
  .ck {
    &.ck-content {
      border: 1px solid #c4c4c4;
    }
    &.ck-editor__editable_inline {
      height: 300px;
    }
  }
</style>
